<template>
	<view :class="taskStep ? 'userList taskStep' : 'userList'">
		<view class="left">
			<text v-if="!taskStep" class="title">{{ lable }}:</text>
			<view :style="
				!item.signUser || item.signUser.isPlanStatus == false ? 'background:#b9b9b9' : item.userId == userinfo.user_id ? 'background:#0091ff' : 'background:#00C6C0'
			" class="useritem" v-for="(item, index) in list" :key="index">
				<text v-if="item.signUser">{{ item.userName.slice(-2) }}</text>
				<text v-else>{{ item.userName.slice(-2) }}</text>
				<view class="closeForm" v-if="item.createFrom === 1" >转派</view>
			</view>
		</view>
		<view class="right" v-if="!taskStep">
			任务跟踪
			<uni-icons color="#666" size="14" type="arrowright" />
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'user-list',
	props: {
		list: {
			type: Array
		},
		typeSatatus: {
			type: Number
		},
		lable: {
			type: String,
			default: '维保人员'
		},
		// 任务追踪页面
		taskStep: {
			type: Boolean,
			default: false
		},
	},
	watch: {
		list() {
			
		}
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
};
</script>

<style lang="scss" scoped>
.userList {
	display: flex;
	justify-content: space-between;
	padding: 18rpx 0;
	border-top: 2rpx solid #e9e9e9;
	background: #fff;
	padding-bottom: 2rpx;
	align-items: center;

	.left {
		color: #666;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 700rpx;
   .title{
		font-size: 26rpx;
}

		.useritem {
			color: #fff;
			width: 54rpx;
			height: 54rpx;
			border-radius: 50%;
			text-align: center;
			font-size: 22rpx;
			line-height: 52rpx;
			margin-left: 12rpx;
			overflow: hidden;
			text {
				width: 78rpx;
				display: block;
				margin-left: -12rpx;
				overflow: hidden;
			}
			.closeForm{
				width: 24px;
				height: 16px;
				font-size: 12px;
				color: #0091ff;
				text-align: center;
				line-height: 16px;
				background: #dcf0ff;
				margin-top: 8rpx;
				margin-left: 2rpx;
				padding: 0 4rpx;
				position: absolute;
				
			}
		}
	}

	.right {
		width: 210rpx;
		display: flex;
		justify-content: flex-end;
		font-weight: normal;
		font-size: 24rpx;
		color: #666;
	}
}

.taskStep {
	padding: 0;
	border-top: none;
	width: 300rpx;
	display: flex;
	justify-content: flex-end;

	.left {
		justify-content: flex-end;
	}
}
</style>
